<%@page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<fmt:setBundle basename="messages.realtime"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>GPS-o&ugrave;</title>

<style type="text/css">
    a {color: black}

    .bgover {	color: #505050;
		background-color: #E0E0FF;
		border: 2px solid #0000A0;
		margin-left: 1px;
		margin-right: 1px;
		cursor: hand;
		cursor: pointer;
		font-family: 'Arial Black', Gadget, sans-serif;
		font-size: 13px;
		}
    .background {color: #A0A0A0;
		background-color: #E0E0E0;
		border: 2px solid #A0A0A0;
		margin-left: 1px;
		margin-right: 1px;
		cursor: hand;
		cursor: pointer;
		font-family: 'Arial Black', Gadget, sans-serif;
		font-size: 13px;
		}
    .foreground {color: black;
		background-color: #A0A0FF;
		border-bottom: 2px solid #A0A0FF;
		border-left: 2px solid #0000A0;
		border-right: 2px solid #0000A0;
		border-top: 2px solid #0000A0;
		margin-left: 1px;
		margin-right: 1px;
		font-family: 'Arial Black', Gadget, sans-serif;
		font-size: 13px;
		}

    .bordermap 	{
		border-left: thick groove #A0A0FF;
		border-right: thick groove #A0A0FF;
		border-bottom: thick groove #A0A0FF;
		border-top: medium solid #A0A0FF;
		}

    .posinfo    {
                width: 220px;
                font-family: arial, sans-serif;
                color: #0000A0;
                font-size: 75%;
                font-stretch: narrower;
                font-weight: bold;
                text-align: left;
                }
</style>

<script type="text/javascript">
var WIN;

var zoomLevel=14;
var latitud=0;
var longitud=0;
var latitudAnterior=0, longitudAnterior=0;
var primerDato=true;

var mostrarRuta=false;
var distancia=0;
var latitudes=[];
var longitudes=[];
var nPoints=0;

function tabGMOn() {
  document.getElementById("GMTab").className="foreground";
  document.getElementById("GMTab").onclick="";
  document.getElementById("GMTab").onmouseover="";
  document.getElementById("GMTab").onmouseout="";
  document.getElementById("VETab").className="background";
  document.getElementById("VETab").onclick=switchToVE;
  document.getElementById("VETab").onmouseover=mouseOver;
  document.getElementById("VETab").onmouseout=mouseOut;
}

function switchToGM() {
  tabGMOn();
  window.frames['VE'].switchMap();
}

function TabVEOn() {
  document.getElementById("VETab").className="foreground";
  document.getElementById("VETab").onclick="";
  document.getElementById("VETab").onmouseover="";
  document.getElementById("VETab").onmouseout="";
  document.getElementById("GMTab").className="background";
  document.getElementById("GMTab").onclick=switchToGM;
  document.getElementById("GMTab").onmouseover=mouseOver;
  document.getElementById("GMTab").onmouseout=mouseOut;
}

function switchToVE() {
  TabVEOn();
  window.frames['GM'].switchMap();
}

function mouseOver() {
	this.className="bgover";
}

function mouseOut() {
	this.className="background";
}

function load() {
  tabGMOn();
  document.getElementById("GM").style.display="block";
  WIN=window.frames['GM'];
  WIN.load();
}
</script>
</head>

<body onload="load()">
  <p style="text-align: center"><img src="/VEGPS/html/images/GPSou-logo-banner.png" alt="GPS-o&ugrave;"></p>
<div style="text-align: center">
  <table style="margin-left: auto; margin-right: auto">
  <tr><td>
  <table cellpadding="0" cellspacing="0">
  <tr><td><div id="GMTab" class="foreground">Google Maps</div></td><td><div id="VETab" class="background"">Virtual Earth</div></td></tr>
  <tr><td colspan="2" class="bordermap">
  <iframe id="GM" name="GM" width="500px" height="300px" src="GoogleGPS_GM.jsp" marginheight="0px" marginwidth="0px" scrolling="no" frameborder="0" style="display: none"></iframe>
  <iframe id="VE" name="VE" width="500px" height="300px" src="GoogleGPS_VE.jsp" marginheight="0px" marginwidth="0px" scrolling="no" frameborder="0" style="display: none"></iframe>
  </td></tr>
  </table>

  
  <input type="button" name="mostrarRuta" id="mostrarRutaBtn" title="<fmt:message key="button.route.title.1"/>" value="<fmt:message key="button.route.1"/>" onClick="WIN.fMostrarRuta(this);">
  </td>

  <td valign="top">
    <form name="datos" action="null">
        <p><fmt:message key="data.text"/><br>
	</p>
	<table>
	<tr><td><fmt:message key="data.date"/> </td><td class="posinfo"><span id="fecha" title="<fmt:message key="data.date.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.time"/> </td><td class="posinfo"><span id="hora" title="<fmt:message key="data.time.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.speed"/> </td><td class="posinfo"><span id="velocidad" title="<fmt:message key="data.speed.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.altitude"/> </td><td class="posinfo"><span id="altitud" title="<fmt:message key="data.altitude.title"/>"> </span></td></tr>
	<tr><td><fmt:message key="data.distance"/> </td><td class="posinfo"><span id="distancia" title="<fmt:message key="data.distance.title"/>"> </span></td></tr>
	<tr><td></td><td style="text-align: left"><input type="button" title="<fmt:message key="button.reset.title"/>" name="reset" value="<fmt:message key="button.reset"/>" onClick="WIN.fReset();"></td></tr>
	</table>
    </form>

  </td></tr>
  <tr><td>
  </td></tr>
  </table>
    <a href="/VEGPS/jsp/Principal.jsp" title="<fmt:message key="menu.1.title"/>"><fmt:message key="menu.1"/></a> | <a href="/VEGPS/ServletGoogleGPS?p=desconectar" title="<fmt:message key="menu.2.title"/>"><fmt:message key="menu.2"/></a>
  <p>
    <img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict" height="31" width="88">
  </p>

</div>

</body>

</html>


